<template>
<div style="padding-bottom:60px;" v-show="!showloading">

  <flexbox>
    <flexbox-item>
      <template>
        <yd-search :result="result" fullpage v-model="value2" :item-click="itemClickHandler" :on-submit="submitHandler"></yd-search>
      </template>
    </flexbox-item>
  </flexbox>
  <!-- 轮播图 -->
  <flexbox v-if="homedata.ad == '1'">
    <flexbox-item>
      <yd-slider autoplay="3000">
          <yd-slider-item v-for="ad in homedata.adlist">
              <img :src="adpic(ad.url, 'normal')" v-bind:style="{ width: '100%', height: homedata.topimgsize + 'px' }">
          </yd-slider-item>
      </yd-slider>
    </flexbox-item>
  </flexbox>

  <flexbox v-if="homedata.isshow == 1"> 
    <flexbox-item class="bgwhite">
      <div class="h4 " style="padding:10px;">
        {{homedata.describe}}
      </div>
    </flexbox-item>
  </flexbox>

  <flexbox class="bgwhite pt15" :gutter="0">
    <yd-slider v-bind:style="{height : parseInt(homedata.typeimgsize) * 2 + 10 + 'px'}">
    <yd-slider-item v-for="tl in typelist" >
        <flexbox class="bgwhite mb10" :gutter="0">
        <flexbox-item :span="1/5" @click.native="clicktype(t.type_code)"
        v-bind:key="index"
         v-for="(t,index) in tl" class="text-center  ">
           <img :src="adpic(t.logo, 'typeimg')" 
                v-bind:style="{ width: homedata.typeimgsize + 'px', height: homedata.typeimgsize + 'px', display : 'inline' }">
          <div class="mt5">{{t.type_name}}</div>
        </flexbox-item>
        </flexbox>
    </yd-slider-item>
    </yd-slider>
  </flexbox>

  <flexbox orient="vertical" :gutter="1" v-for="item1, key1 in homedata.columnlist">
    <flexbox-item >
      <div class="h4 pl10 pt10 pb10 bgwhite">{{item1.column_name}}</div>
    </flexbox-item>
    <flexbox-item >
     <yd-list :theme="item1.mui"> 
          <yd-list-item v-for="item, key in item1.columnproductlist" :key="key"
          @click.native="productinfo(item)"
          >
              <img slot="img" 
              v-lazy="pic(item.top_pic)"
              >

              <span slot="title" >
                {{item.name}}
              </span>
              <yd-list-other slot="other">
                  <div class="mt5">
                      <span class="red">
                        <em>¥</em><span class="h2">{{item.guide_price}}</span>
                      </span>
                      <span class="h4">起</span>
                  </div>
                  <div v-if="item.flash_state == '1'">
                      <yd-countdown
                      v-if="checkDate(item.start_time)"
                      :time="item.start_time.replace(/-/g,'/')"></yd-countdown>

                      <yd-countdown 
                      v-if="!checkDate(item.start_time)"
                      :time="item.end_time.replace(/-/g,'/')"></yd-countdown>
                  </div>
              </yd-list-other>
          </yd-list-item>
      </yd-list>
    </flexbox-item>
  </flexbox>

  
  <flexbox class="mt10">
    <flexbox-item>
     <yd-list :theme="homedata.mui"> 
          <yd-list-item v-for="item, key in homedata.muilist" :key="key"
          @click.native="productinfo(item)"
          >
              <img slot="img" v-lazy="pic(item.top_pic)">
              <span slot="title">{{item.name}}</span>
              <yd-list-other slot="other">
                  <div class="mt5">
                      <span class="red">
                        <em>¥</em><span class=" h2">{{item.guide_price}}</span>
                      </span> <span class="h4">起</span>
                      <!-- <span class="demo-list-del-price">¥{{item.w_price}}</span> -->
                  </div>
                  <div v-if="item.flash_state == '1'">
                      <yd-countdown
                        v-if="checkDate(item.start_time)"
                       :time="item.start_time.replace(/-/g,'/')"></yd-countdown>

                      <yd-countdown 
                        v-if="!checkDate(item.start_time)"
                      :time="item.end_time.replace(/-/g,'/')"></yd-countdown>
                  </div>
              </yd-list-other>
          </yd-list-item>
      </yd-list>
    </flexbox-item>
  </flexbox>

</div>
</template>

<script>

import { mapGetters, mapActions } from 'vuex'
import { cutImage, changeImg } from '../util/util'
import { homePageData } from '../service/api'

export default {
  name: 'Home',
  data () {
    return {
      value2: '',
      result: [],
      homedata : {},
      showloading : true,

      //typelist : [],
    }
  },

  computed: {
      ...mapGetters([
          //'homedata',
          'company_code',
          'URL',
      ]),

      productnamelist () {
          var arr = [];
          for(var i = 0; i < this.homedata.columnlist.length; i++){
              var tmp1 = this.homedata.columnlist[i];
              for(var j = 0; j < tmp1.columnproductlist.length; j++){
                  var tmp2 = tmp1.columnproductlist[j];
                  arr.push(tmp2.name);
              }
          }
          for(var i = 0; i < this.homedata.muilist.length; i++){
            var tmp = this.homedata.muilist[i];
            arr.push(tmp.name);
          }

          console.log(arr);
          return arr;
      },


      typelist () {

          let arr = [];

          if(this.homedata.typelist == undefined){
            return arr;
          }

          for(var i = 0; i < this.homedata.typelist.length; i += 5){
              arr.push(this.homedata.typelist.slice(i,i+5));
          }
          return arr;
      },

  },

  watch: {
      value2(val) {
          this.result = this.getResult(val);
      }
  },


  mounted () {
    //this.$store.dispatch('getHomeData', { 'company_code' : this.company_code});
    //this.initData();
    this.initData1();
  },

  methods : {
      productinfo (item) {
        console.log(item);
        console.log('productinfo');

        this.$router.push({ 
          name: 'productinfo', 
          params: { code: item.code },
          query : { 'company_code' : this.company_code},
        });

      },


      getResult(val) {
        console.log('getResult');
        console.log(val);
          if (!val) return [];
          return this.productnamelist.
          filter(value => (new RegExp(val, 'i').test(value)));
      },
      itemClickHandler(item) {
          console.log('itemClickHandler');
          this.$router.push({ 
            name: 'productlist', 
            query : {
              'company_code' : this.company_code,
              'name' : item,
            },
          });
      },
      submitHandler(value) {
          console.log('submitHandler');
          // this.$dialog.toast({mes: `搜索：${value}`});
          this.$router.push({ 
            name: 'productlist', 
            query : {
              'company_code' : this.company_code,
              'name' : value,
            },
          });
      },

      clicktype(code) {
          console.log(code);
          this.$router.push({ 
            name: 'productlist', 
            query : {
              'type' : code,
              'company_code' : this.company_code
            },
          });
      },

      checkDate(d) {
          return new Date(d.replace(/-/g,'/')).getTime() > new Date().getTime() ;
      },


      pic (toppic) {
          var result = this.URL.defaultImg;
          if(toppic != undefined){
              try{
                  var ttt = JSON.parse(toppic);
                  result = cutImage(ttt[0]);
              }catch(err){

              }
          }
          return result;
      },

      adpic (url, what) {
          return changeImg(url, what);
      },


      // async initData() {
      //     var res = await homePageData();
      //     if(res.errcode == 0){
      //         this.homedata = res.data;
      //         console.log(this.homedata);
      //         this.showloading = false;

      //         for(var i = 0; i < this.homedata.typelist.length; i += 5){
      //             this.typelist.push(this.homedata.typelist.slice(i,i+5));
      //         }

      //     }
      // },


      initData1 () {

          const para = {
            fun : 'homePageData1',
            cb : res => {
              this.homedata = res;
              this.showloading = false;
              
            }
          };

          this.$store.dispatch('update', para);

      },

  },


}
</script>

<style scope>

.bounce-enter-active {
  animation: bounce-in .8s;
}
.bounce-leave-active {
  animation: bounce-in .8s reverse;
}
@keyframes bounce-in {
  0% {
    transform: scale(0);
  }
  50% {
    transform: scale(1.5);
  }
  100% {
    transform: scale(1);
  }
}


  
</style>
